<template>
  <div> 
    <transition name="fade" >
      <div v-if="currentValue"  class="rain-popup-bg" @click="hideVisible"></div>
    </transition>
    <input type="text" v-model="currentValue" style="display:none" >
    <div v-if="currentValue" class="rain-popup" :class="[position?'rain-popup--'+position:'']" >
      <div v-if="$slots.default" >
        <slot></slot>
      </div>
    </div>  
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"

@Component({
  components: {}
})
export default class Home extends Vue {
  // props
  @Prop(String) position!:string 
  @Prop(Boolean) value!:boolean 
  //data
  currentValue = this.value

  // watch
  @Watch('currentValue')
  getCurrentValue(val:any) {
    this.$emit('input',val)
  }
  @Watch('value')
  getShowVisible(val:any){
    this.currentValue = val
  }
  // method
  hideVisible(){
    this.currentValue = false
  }
}
</script>
<style lang="scss" scoped>
@import "../scss/popup.scss";
</style>
